*{
	margin: 0;
	padding: 0;
}
#container{
	width: 100%;
	height: 600px;
	overflow: hidden;
}
#container .bird{
	width: 250px;
	height: 250px;
	/*background: #abcdef;*/
	margin: 200px auto 0;
	position: relative;
	z-index: -2;
	opacity: 0;
	animation: birdAnimation 4s ease-in-out infinite;
	-ms-animation: birdAnimation 4s ease-in-out infinite;
	-webkit-animation: birdAnimation 4s ease-in-out infinite;
	-moz-animation: birdAnimation 4s ease-in-out infinite;
	-o-animation: birdAnimation 4s ease-in-out infinite;
}
/*头部*/
#container .head div{
	background: #000;
	position: absolute;
	left: 50%;
}
#container .head-top{
	width: 64px;
	height: 20px;
	top: 10px;
	margin-left: -32px;
	border-top-left-radius: 50% ;
	border-top-right-radius: 50% ;
}
#container .head-body{
	width: 80px;
	height: 90px;
	top: 20px;
	margin-left: -40px;
	border-top-left-radius: 11px 50% ;
	border-top-right-radius: 11px 50% ;
	border-bottom-left-radius: 13px 80% ;
	border-bottom-right-radius: 13px 80% ;
}
/*眼睛*/
#container .eyes div{
	border-radius: 50%;
	border: 3px solid #000;
	background: #fff;
	position: absolute;
}
#container .eye-left{
	width: 25px;
	height: 25px;	
	top: 44px;
	left: 72px;
}
#container .eye-right{
	width: 30px;
	height: 30px;
	top: 40px;
	left: 102px;
}
/*眼珠*/
#container .eyeball div{
	border-radius: 50%;
	background: #000;
	position: absolute;
}
#container .eyeball .eyeball-left{
	width: 8px;
	height: 8px;	
	top: 57px;
	left: 87px;
	animation: eyeAnimationLeft .8s ease-in-out infinite;
	-ms-animation: eyeAnimationLeft .8s ease-in-out infinite;
	-webkit-animation: eyeAnimationLeft .8s ease-in-out infinite;
	-moz-animation: eyeAnimationLeft .8s ease-in-out infinite;
	-o-animation: eyeAnimationLeft .8s ease-in-out infinite;
}
#container .eyeball .eyeball-right{
	width: 10px;
	height: 10px;
	top: 56px;
	left: 111px;
	animation: eyeAnimationRight .8s ease-in-out infinite;
	-ms-animation: eyeAnimationRight .8s ease-in-out infinite;
	-webkit-animation: eyeAnimationRight .8s ease-in-out infinite;
	-moz-animation: eyeAnimationRight .8s ease-in-out infinite;
	-o-animation: eyeAnimationRight .8s ease-in-out infinite;
}
/*嘴*/
#container .beak{
	width: 50px;
	height: 12px;
	background: #c58612;
	border: 3px solid #000;
	border-top-left-radius: 70px 80% ;
	border-top-right-radius: 11px;
	border-bottom-left-radius: 60px 80% ;
	border-bottom-right-radius: 11px;
	position: absolute;
	top: 75px;
	left: 58px;
	transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
}
/*身体*/
#container .body{
	width: 66px;
	height: 95px;
	border: 4px solid #000;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	position: absolute;
	top: 96px;
	left: 88px;
	background:  -ms-linear-gradient(#97c3c4,#3f7881);
	background:  -webkit-linear-gradient(#97c3c4,#3f7881);
	background:  -moz-linear-gradient(#97c3c4,#3f7881);
	background:  -o-linear-gradient(#97c3c4,#3f7881);
}
/*翅膀*/
#container .wing-left{
	width: 50px;
	height: 50px;
	background: #000;
	border-top-left-radius: 70px 80%;
	border-bottom-left-radius: 30px 80%;	
	position: absolute;
	top: 102px;
	left: 70px;
	z-index: -1;
	transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
}
#container .wing-right{
	width: 55px;
	height: 60px;
	background: #000;
	border-top-left-radius: 35px 80% ;
	border-top-right-radius: 13px 90%;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 5px;
	position: absolute;
	top: 101px;
	left: 135px;
	transform: skew(-5deg,38deg);
	-ms-transform: skew(-5deg,38deg);
	-webkit-transform: skew(-5deg,38deg);
	-moz-transform: skew(-5deg,38deg);
	-o-transform: skew(-5deg,38deg);
}
/*尾巴*/
#container .tail{
	width: 50px;
	height: 25px;
	border: 4px solid #000;
	border-top-left-radius: 35px 80% ;
	border-top-right-radius: 5px 80%;
	border-bottom-left-radius: 60px 90%;
	border-bottom-right-radius: 10px;
	position: absolute;
	top: 165px;
	left: 150px;
	z-index: -1;
	transform: skew(7deg,30deg);
	-ms-transform: skew(7deg,30deg);
	-webkit-transform: skew(7deg,30deg);
	-moz-transform: skew(7deg,30deg);
	-o-transform: skew(7deg,30deg);

	background:  -ms-linear-gradient(left,#3f7881,#97c3c4);
	background:  -webkit-linear-gradient(left,#3f7881,#97c3c4);
	background:  -moz-linear-gradient(left,#3f7881,#97c3c4);
	background:  -o-linear-gradient(left,#3f7881,#97c3c4);
}
/*脚*/
#container .foot-top{
	width: 4px;
	height: 30px;
	background: #c58612;
	border: 3px solid #000;
	border-bottom: none;
	position: absolute;
	top: 186px;
	z-index: -1;
}
#container .foot-left .foot-top{
	left: 104px;
}
#container .foot-right .foot-top{
	left: 134px;
}
#container .foot-center{
	width: 15px;
	height: 4px;
	background: #c58612;
	border: 3px solid #000;
	border-radius: 40%;
	position: absolute;
	top: 216px;
}
#container .foot-left .foot-center{
	border-left: none;
	left: 105px;
	z-index: -2;
	transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
}
#container .foot-right .foot-center{
	border-right: none;
	left: 125px;
	z-index: -2;
	transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
}
#container .foot-bottom{
	width: 20px;
	height: 5px;
	background: #c58612;
	border: 3px solid #000;
	border-radius: 40%;
	position: absolute;
	top: 217px;
	z-index: -2;
}
#container .foot-left .foot-bottom{
	border-right: none;
	left: 90px;
	transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);

	animation: footAnimation .2s infinite;
	-ms-animation: footAnimation .2s infinite;
	-webkit-animation: footAnimation .2s infinite;
	-moz-animation: footAnimation .2s infinite;
	-o-animation: footAnimation .2s infinite;
}
#container .foot-right .foot-bottom{
	border-left: none;
	left: 136px;
	transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-o-transform: rotate(20deg);
}

/* 左眼动画 */
@keyframes eyeAnimationLeft{
	0%{ left: 78px;}
	50%{ left: 87px;}
	100%{ left: 78px;}
}
@-ms-keyframes eyeAnimationLeft{
	0%{ left: 78px;}
	50%{ left: 87px;}
	100%{ left: 78px;}
}
@-webkit-keyframes eyeAnimationLeft{
	0%{ left: 78px;}
	50%{ left: 87px;}
	100%{ left: 78px;}
}
@-moz-keyframes eyeAnimationLeft{
	0%{ left: 78px;}
	50%{ left: 87px;}
	100%{ left: 78px;}
}
@-o-keyframes eyeAnimationLeft{
	0%{ left: 78px;}
	50%{ left: 87px;}
	100%{ left: 78px;}
}

 /*右眼动画*/
@keyframes eyeAnimationRight{
	0%{ left: 111px;}
	50%{ left: 121px;}
	100%{ left: 111px;}
}
@-ms-keyframes eyeAnimationRight{
	0%{ left: 111px;}
	50%{ left: 121px;}
	100%{ left: 111px;}
}
@-webkit-keyframes eyeAnimationRight{
	0%{ left: 111px;}
	50%{ left: 121px;}
	100%{ left: 111px;}
}
@-moz-keyframes eyeAnimationRight{
	0%{ left: 111px;}
	50%{ left: 121px;}
	100%{ left: 111px;}
}
@-o-keyframes eyeAnimationRight{
	0%{ left: 111px;}
	50%{ left: 121px;}
	100%{ left: 111px;}
}

/*脚部动画*/
@keyframes footAnimation{
	30%{ transform: rotate(-8deg);}
	100%{ transform: rotate(-25deg);}
}
@-ms-keyframes footAnimation{
	30%{ -ms-transform: rotate(-8deg);}
	100%{ -ms-transform: rotate(-25deg);}
}
@-webkit-keyframes footAnimation{
	30%{ -webkit-transform: rotate(-8deg);}
	100%{ -webkit-transform: rotate(-25deg);}
}
@-moz-keyframes footAnimation{
	30%{ -moz-transform: rotate(-8deg);}
	100%{ -moz-transform: rotate(-25deg);}
}
@-o-keyframes footAnimation{
	30%{ -o-transform: rotate(-8deg);}
	100%{ -o-transform: rotate(-25deg);}
}

/*鸟的动画*/
@keyframes birdAnimation{
	0%{ margin: 200px auto 0; opacity: 1;}
	40%{ margin: -250px auto 0; opacity: 0;}
	60%{ margin: 500px auto 0; opacity: 0;}
	100%{ margin: 200px auto 0; opacity: 1;}
}
@-ms-keyframes birdAnimation{
	0%{ margin: 200px auto 0; opacity: 1;}
	40%{ margin: -250px auto 0; opacity: 0;}
	60%{ margin: 500px auto 0; opacity: 0;}
	100%{ margin: 200px auto 0; opacity: 1;}
}
@-webkit-keyframes birdAnimation{
	0%{ margin: 200px auto 0; opacity: 1;}
	40%{ margin: -250px auto 0; opacity: 0;}
	60%{ margin: 500px auto 0; opacity: 0;}
	100%{ margin: 200px auto 0; opacity: 1;}
}
@-moz-keyframes birdAnimation{
	0%{ margin: 200px auto 0; opacity: 1;}
	40%{ margin: -250px auto 0; opacity: 0;}
	60%{ margin: 500px auto 0; opacity: 0;}
	100%{ margin: 200px auto 0; opacity: 1;}
}
@-o-keyframes birdAnimation{
	0%{ margin: 200px auto 0; opacity: 1;}
	40%{ margin: -250px auto 0; opacity: 0;}
	60%{ margin: 500px auto 0; opacity: 0;}
	100%{ margin: 200px auto 0; opacity: 1;}
}